<script setup>
  import { ref } from 'vue'
  import {
    createOrderApi,
    getAddressApi,
    preOrderApi,
  } from '@/server/address.js'
  import { persitionStore } from '@/store/persition.js'

  // 订单id信息
  const props = defineProps(['id'])

  //地址信息
  const addressInfo = ref([])
  // 获取地址信息和处方信息
  async function getAddress() {
    const { data } = await getAddressApi()
    addressInfo.value = data.data[0]
  }
  getAddress()

  // // 获取处方详细信息
  // const persitionInfo = ref(persitionStore().persitionStoreInfo)

  // 处方信息
  const prOrderInfo = ref([])

  // 获取处方信息方法
  async function getOrderInfo() {
    const { data } = await preOrderApi(props.id)
    prOrderInfo.value = data.data
  }

  getOrderInfo()

  // 金额弹出组件
  const custPayRef = ref(null)

  // 预订单id
  const orderId = ref('')

  // 支付方式
  const payInfoList = [
    { title: '微信支付', thumb: '/static/images/wechatpay-icon.png' },
    { title: '支付宝支付', thumb: '/static/images/alipay-icon.png' },
  ]

  // 点击立即支付
  async function onPayInfofn() {
    const { data } = await createOrderApi(
      prOrderInfo.value.id,
      addressInfo.value.id
    )
    orderId.value = data.data.id
    custPayRef.value.open()
  }

  // 关闭弹窗
  function onClosePaypop() {
    custPayRef.value.close()
  }
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{ addressInfo.city }}
          </view>
          <view class="detail">{{ addressInfo.addressDetail }}</view>
          <view class="receiver"
            >{{ addressInfo.receiver }} {{ addressInfo.mobile }}</view
          >
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view
          class="medicine-list-item"
          v-for="item in prOrderInfo.medicines"
          :key="item.id"
        >
          <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ item.name }}</text>
            <text class="unit symbol">{{ item.specs }}</text>
            <text class="price">¥{{ item.amount }}</text>
          </view>
          <view class="quantity">x{{ item.quantity }}</view>
          <view class="guide">{{ item.usageDosag }}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item
            title="药品金额"
            :right-text="`¥${prOrderInfo.payment}`"
          />
          <uni-list-item
            title="运费"
            :right-text="`¥${prOrderInfo.expressFee}`"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`¥${prOrderInfo.couponDeduction}`"
          />
          <uni-list-item
            title="实付款"
            :right-text="`¥${prOrderInfo.actualPayment}`"
          />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{ prOrderInfo.actualPayment }}</text>
        </view>
        <view class="buttons">
          <button class="uni-button" @click="onPayInfofn">立即支付</button>
        </view>
      </view>
    </view>

    <!-- 支付弹层 -->
    <custom-payPop
      ref="custPayRef"
      :payment="prOrderInfo.actualPayment"
      @closePayPopfn="onClosePaypop"
      :payInfoList="payInfoList"
      :orderId="orderId"
      payCallbackVal="http://localhost:5173/#/subpack_medicue/payResult/payResult"
    ></custom-payPop>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
